﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">

    <script src="/assets3/js/jquery.min.js"></script>
    <script src="/assets3/js/easyResponsiveTabs.js" type="text/javascript"></script>
    <style type="text/css">
        .err
        {
            color:red;
            font-weight:bold;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalTab').easyResponsiveTabs({
                type: 'default',
                width: 'auto',
                fit: true
            });
        });

        //定义校验内容为空函数
        function isNull(content) {
            return /^\s+$/.test(content) || content=="";
        }
        //邮箱
        var is_frontUserEmaile_exists=false;
        function checkEmail() {
            //非空校验
            var frontUserEmail=$("#frontUserEmail").val();
            //如果用户名为空
            if (isNull(frontUserEmail)){
                $("#nameErr").html("邮箱不能为空");
                return false;
            }
            //格式校验
            var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!reg.test(frontUserEmail)){
                $("#emailErr").html("用户名长度必须为邮箱格式");
                return false;
            }
            //如果用户名存在则直接返回false
            if(is_frontUserEmail_exists){
                return false;
            }
            //校验正确清空提示
            $("#emailErr").html("");
            return true;
        }
        //校验y用户名非空、格式，以及是否存在
        function  checkEmailAjax() {
            //先校验非空和格式
            //非空校验
            var frontUserEmail=$("#frontUserEmail").val();
            //如果邮箱为空
            if (isNull(frontUserEmail)){
                $("#emailErr").html("邮箱不能为空");
                return;
            }
            //格式校验
            var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!reg.test(frontUserEmail)){
                $("#emailErr").html("邮箱格式必须正确");
                return;
            }
            //校验成功，在发起ajax请求，校验存在性
            $.ajax({
                url:"/front/checkAccountEmail",
                type:"post",
                data:{"frontUserEmail" : $("#frontUserEmail").val()},
                success:function (data) {
                    //记录y用户名校验的结果
                    is_frontUserEmail_exists=data.is_frontUserEmail_exists;
                    console.log(data);
                    //根据返回结果，进行信息提示
                    if(data.is_frontUserEmail_exists){
                        $("#emailErr").html("用户名已经存在");
                    }else{
                        //如果不存在则清空消息
                        $("#emailErr").html("");
                    }
                },
                dataType:"json"
            });
        }
        //密码
        function checkPwd(){
            var frontUserPwd=$("#frontUserPwd").val();
            if(isNull(frontUserPwd)){
                $("#pwdErr").html("密码不能为空");
                return false;
            }
            var reg=/^[A-Za-z0-9]{6,20}$/;
            if(!reg.test(frontUserPwd)){
                $("#pwdErr").html("密码必须为6-20个字符");
                return false;
            }
            $("#pwdErr").html("");
            return true;
        }
        //确认密码
        function checkPwd2() {
            var frontUserPwd=$("#frontUserPwd").val();
            var frontUserPwd2=$("#frontUserPwd2").val();
            if(isNull(frontUserPwd2)){
                $("#pwdErr2").html("确认密码不能为空");
                return false;
            }
            var reg=/^[A-Za-z0-9]{6,20}$/;
            if(!reg.test(frontUserPwd2)){
                $("#pwdErr2").html("密码必须为6-20个字符");
                return false;
            }
            //如果密码和确认密码不一致
            if(frontUserPwd!=frontUserPwd2){
                $("#pwdErr2").html("两次密码不一致");
                return false;
            }
            $("#pwdErr2").html("");
            return true;
        }
        function checkAll() {
            //所有校验都通过
            if(checkEmail()&checkPwd()&checkPwd2()){
                return true;
            }
            return false;
        }

    </script>
    <!--script-->

</head>

<body>
<!-- 引入头部的部分 -->
<div th:include="/front/header"></div>
<!-- 页面标题 -->
<section class="page-title-inner" data-bg-img='assets/img/page-titlebg.png'>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- 页面标题内 -->
                <div class="page-title-wrap">
                    <div class="page-title-heading"><h1 class="h2">我的账户<span>资料</span></h1></div>
                    <ul class="list-unstyled mb-0">
                        <li><a href="index.html">家</a></li>
                        <li><a href="#">店</a></li>
                        <li class="active"><a href="#">登陆</a></li>
                    </ul>
                </div>
                <!-- 结束页面标题内页 -->
            </div>
        </div>
    </div>
</section>
<!-- 页面标题结束 -->

<!-- 注销注册包 -->
<section class="pt-100 pb-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <!-- 登录注册 -->
                <div class="login-register-wrap text-center main-log-regi">
                    <!-- 罗琳登记卫星 -->
                    <div class="login-register-nav">
                        <nav class="nav lr-nav text-center">
                            <a id="nav-login-tab2" data-toggle="tab" href="#login2" class="active">登陆</a>
                            <a id="nav-register-tab2" data-toggle="tab" href="#reg2">注册</a>
                        </nav>
                    </div>
                    <!-- 结束登录注册导航 -->

                    <!-- 登录注册内容 -->
                    <div class="login-register-content tab-content">
                        <div class="tab-pane fade show active" id="login2" role="tabpanel" aria-labelledby="nav-login-tab2">
                            <div class="primary-form parsley-validate">
                                <form action="/front/logout_submit" method="post">
                                    <!-- 日志输入 -->
                                    <div class="name-input input-field">
                                        <label>
                                            <img src="assets/img/icons/account3.svg" class="svg" alt="">
                                        </label>
                                        <input type="text" placeholder='User name / Email Address' class="theme-input-style" name="frontUserEmail"  required>
                                    </div>

                                    <div class="password-input input-field">
                                        <label>
                                            <img src="assets/img/icons/regi-icon.svg" class="svg" alt="">
                                        </label>
                                        <input type="password" placeholder='password' class="theme-input-style" name="frontUserPwd" required>
                                    </div>
                                    <div style="color: red">
                                        <span th:text="${err}"></span>
                                    </div>
                                    <!-- 日志输入 -->
                                    <button type="submit" class="btn btn-fill-type">登陆</button>
                                </form>
                                <p>没有账户,<a href="#">现在注册!</a></p>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="reg2" role="tabpanel" aria-labelledby="nav-register-tab2">
                            <div class="primary-form parsley-validate">
                                <form action="/front/register_submit">
                                    <!-- 输入注册 -->
                                    <div class="name-input input-field">
                                        <label>
                                            <img src="assets/img/icons/account-icon.svg" class="svg" alt="">
                                        </label>
                                        <input type="text" placeholder='User name / Email Address' class="theme-input-style" name="frontUserEmail"
                                               id="frontUserEmail" onblur="checkEmailAjax()"   required>
                                    </div>
                                    <div class="err" id="emailErr"></div>

                                    <div class="password-input input-field">
                                        <label>
                                            <img src="assets/img/icons/regi-icon.svg" class="svg" alt="">
                                        </label>
                                        <input type="password" placeholder='password' class="theme-input-style" name="frontUserPwd" id="frontUserPwd" onblur="checkPwd()" required>
                                    </div>
                                    <div class="err" id="pwdErr"></div>
                                    <div class="password-input input-field">
                                        <label>
                                            <img src="assets/img/icons/regi-icon.svg" class="svg" alt="">
                                        </label>
                                        <input type="password" placeholder='password' class="theme-input-style" name="frontUserPwd2" id="frontUserPwd2" onblur="checkPwd2()" required>
                                    </div>
                                    <div class="err" id="pwdErr2"></div>
                                    <!-- register input -->
                                    <button type="submit" class="btn btn-fill-type">注册</button>
                                </form>
                                <p>有一个账户,<a href="#">现在登录!</a></p>
                            </div>
                        </div>
                    </div>
                    <!-- 结束登录注册内容 -->
                </div>
                <!-- 登入登记册结束 -->
            </div>
        </div>
    </div>
</section>
<!-- 注销寄存器结束换行 -->

<!-- 页脚区 -->
<!-- 引入页面尾部的部分 -->
<div th:include="/front/footer"></div>
<!-- 页脚区域结束 -->

<!-- 返回顶部 -->
<div class="back-to-top">
    <a href="#">
        <div class="back-toop-tooltip"><span>返回顶部</span></div>
        <div class="top-array"></div>
        <div class="top-line"></div>
    </a>
</div>
<!-- 返回顶部 -->

<!-- 模态快速视图-->
<div class="modal-quickview-container">
    <div class="quick-view-content-wrap">
        <div class="modal-window-overlay"></div>
        <div class="quick-view-content">
            <div class="modal-window-close">
                <img src="assets/img/icons/close-button.svg" class="svg" alt="">
            </div>
            <div class="quick-view-content-inner">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <!-- 开始营业产品幻灯片r -->
                        <div class="shop-product-slider-wrap">
                            <!-- 开始铺顶侧滑块 -->
                            <div class="swiper-container quick-product-gallery">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                    </div>
                                </div>
                            </div>
                            <!-- 年底的滑块顶部侧 -->

                            <!-- 启动滑块底部侧 -->
                            <div class="swiper-container quick-product-thumbs">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- 端面滑块底面 -->
                        </div>
                        <!-- 商店结束产品滑块 -->
                    </div>

                    <div class="col-lg-5">
                        <!-- 产品详细信息内 -->
                        <div class="product-details-inner">
                            <!-- 产品信息 -->
                            <div class="product-info">
                                <div class="product-rating">
                                    <div class="star-rating">
                                        <span></span>
                                    </div>
                                </div>

                                <!-- 产品标题 -->
                                <div class="product-title">
                                    <h2><a href="shop-details.html">编织抱枕</a></h2>
                                </div>
                                <!-- 产品标题结束 -->

                                <div class="product-price"><h3 class="new-price">$25</h3><h5 class="old-price">$30.1</h5></div>

                                <div class="product-description">
                                    <p>老板娘把把这位先生的女儿哄得很开心乐.</p>
                                </div>

                                <!-- 产品组列表 -->
                                <div class="list-product-group">
                                    <ul class="mb-0 list-unstyled">
                                        <li class="size-group group">
                                            <span class="list-heading">尺寸:</span>
                                            <ul class="size-list mb-0 list-unstyled">
                                                <li><a href="#" class="product-size"><span>L</span></a></li>
                                                <li><a href="#" class="active product-size"><span>M</span></a></li>
                                                <li><a href="#" class="product-size"><span>S</span></a></li>
                                            </ul>
                                        </li>
                                        <li class="quantity-group group">
                                            <span class="list-heading">数量:</span>
                                            <div class="product-quantity">
                                                <span class="minus"><img src="assets/img/icons/minus.svg" class="svg" alt=""></span>
                                                <input type="text" value="0" class="product-quantity-list product-size">
                                                <span class="plus"><img src="assets/img/icons/plus.svg" class="svg" alt=""></span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 列表产品组结束 -->

                                <!-- 产品细节btn -->
                                <div class="product-details-btns">
                                    <div class="addto-bag-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span><img src="assets/img/icons/add-bag.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0">加入购物车t</span>
                                        </a>
                                    </div>
                                    <div class="wish-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span class=""><img src="assets/img/icons/wishlist.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0"></span>
                                        </a>
                                    </div>
                                    <div class="compare-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span><img src="assets/img/icons/compare.svg" alt="" class="svg"></span>
                                        </a>
                                    </div>
                                </div>
                                <!-- 产品细节btn -->


                                <!--更多的细节 -->
                                <div class="more-details-button">
                                    <a href="shop-details.html" class="btn btn-line roboto">更多的细节</a>
                                </div>
                                <!-- 更多细节结束 -->

                                <!-- 产品马塔-->
                                <div class="product_meta item-product-meta-info">
                                            <span class="sku_wrapper">
                                                <label>
                                                    库存单位:
                                                    <span>N/A</span>
                                                </label>
                                            </span>
                                    <span class="posted_in">
                                                <span class="meta-item-list">
                                                     <a href="#">附件</a>,
                                                 <a href="#">时尚</a>,
                                                <a href="#">夏季</a>
                                                </span>
                                            </span>
                                </div>
                                <!-- 成品mata -->
                            </div>
                            <!-- 产品信息结束 -->
                        </div>
                        <!-- 产品细节结束内页 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--模态快速视图结束-->

<!-- 添加添加到购物车通知 -->
<div class="modal-add-notifacition">
    <div class="add-notifacition-inner media align-items-center">
        <div class="add-noti-image">
            <img src="assets/img/product/add-note.jpg" alt="">
        </div>
        <div class="add-noti-text media-body">
            <span>猫眼放大镜</span>
            <p>添加到您的购物车成功!</p>
        </div>
    </div>
</div>
<!-- 添加添加到购物车通知 -->

<!-- 添加添加到购物车通知 -->
<div class="modal-wish-notifacition">
    <div class="wish-notifacition-inner media align-items-center">
        <div class="wish-noti-image">
            <img src="assets/img/product/add-note.jpg" alt="">
        </div>
        <div class="wish-noti-text media-body">
            <span>猫眼放大镜</span>
            <p>添加到您的购物车成功!</p>
        </div>
    </div>
</div>
<!-- 添加添加到购物车通知 -->

<!-- JS Files -->
<!-- ==== JQuery 3.3.1 js file==== -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/parsley/parsley.min.js"></script>
<script src="assets/plugins/retinajs/retina.min.js"></script>
<script src="assets/plugins/parallax/parallax.js"></script>
<script src="assets/plugins/parallax/parallaxh.min.js"></script>
<script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
<script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
<script src="assets/plugins/swiper/swiper.min.js"></script>
<script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
<script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
<script src="assets/plugins/text-animation/anime.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>